<template>
  <div>
    <div class="statusBar">我是状态栏</div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="北京"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-tabs v-model="activeName">
      <van-tab title="标签 1" name="a">
        <ul>
          <li>
            <div class="imgBox"></div>
            <div class="wordBox">
              <div class="word1">肖申克的救赎</div>
              <div class="star"></div>
              <div class="introduce">sdsdfsfsf</div>
            </div>
            <div class="rightArea">
              <div class="buy">购票</div>
              <div class="downWord">2万人看过</div>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="标签 2" name="b">内容 2</van-tab>
      <van-tab title="标签 3" name="c">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  activeName: 'a',
  methods: {
    onClickLeft () {
      Toast('返回')
    },
    onClickRight () {
      Toast('北京')
    }
  }
}
</script>

<style scoped>
.statusBar {
  width: 750px;
  height: 40px;
  background-color: black;
  color: white;
  font-size: 40px;
  position: absolute;
  top: 0px;
}
.van-tabs--line{
  margin-bottom: 1px solid grey;
}
li{
  padding-left: 25px;
  box-sizing: border-box;
  width: 728px;
  height: 292px;
  border-bottom: 1px solid grey;
}
.imgBox{
  width: 175px;
  height: 240px;
  background-color: aqua;;
  float: left;
}
.wordBox{
  width: 353px;
  height: 256px;
  background-color: brown;
  float: left;
}
.rightArea{
  width: 174px;
  height: 233px;
  background-color: aquamarine;
  float: left;
  border-left: 1px dashed #000;
}
.star{
  width: 233px;
  height: 37px;
  border: 1px solid yellow;
}
.introduce{
  width: 298px;
  height: 98px;
  border: 2px solid white;
  font-size: 25px;
  color: grey;;
}
.word1{
  font-size: 39px;
  font-weight: bold;;
}
.buy{
  width: 126px;
  height: 53px;
  border: 2px solid red;
  border-radius: 5px;
  text-align: center;
  line-height: 53px;
  color: red;;;
  font-size: 27px;;
  margin-top: 83px;;
}
.downWord{
  font-size: 25px;
  color: grey;
  margin-top: 24px;;
}
</style>
